<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div style="display: grid; place-items: center">
    <el-carousel :interval="5000" arrow="always">
      <el-carousel-item v-for="item in imageList" :key="item">
        <img
          :src="item.url"
          no-repeat
          style="object-fit: fill; height: 100%; width: 100%"
        />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup lang="ts">
// import utils from "../../utils/rotation";

//定义跑马灯的图片路径
const imageList = [
  //   { url: utils.getAssetsFile("1.jpg") },
  //   { url: utils.getAssetsFile("2.jpg") },
  //   { url: utils.getAssetsFile("3.jpg") },
  {
    url:
      "https://ts1.cn.mm.bing.net/th/id/R-C.4810e929b116d349f8d927a4b5c93cae?rik=k%2fDtSfiLnibzyw&riu=http%3a%2f%2fgetcharm-smart.xin%2fdata%2fupload%2fimage%2f20180730%2f1532937069291239.jpg&ehk=%2bOLjYA7VSwz8nFvVvLkt2LnJGiJ1XvVOPrwCc4Rpk8U%3d&risl=&pid=ImgRaw&r=0",
  },
  {
    url:
      "https://ts1.cn.mm.bing.net/th/id/R-C.53f50c43474b8d5878cbc87e9e755b5f?rik=Wm5HMRsNe2rJTw&riu=http%3a%2f%2fgetcharm-smart.xin%2fdata%2fupload%2fimage%2f20180815%2f1534321832760629.jpg&ehk=GfrTkqkOn6adNYA4LQTT3YFtMtzCFXknmRrrchLB4CA%3d&risl=&pid=ImgRaw&r=0",
  },
  {
    url:
      "https://ts1.cn.mm.bing.net/th/id/R-C.23265851470041b18324dd49827a2af0?rik=wu4FBMtorWLb1g&riu=http%3a%2f%2fwww.sciencep.cas.cn%2fdtlb2017%2fimages%2fP020170808535127926684.png&ehk=cBPrD1krSDzpUq4EaSVrABvkSCPc9pH9pAjZ6Z661jk%3d&risl=&pid=ImgRaw&r=0",
  },
  {
    url:
      "https://img.zcool.cn/community/0145b4590ab077a801214550ff534d.jpg@1280w_1l_2o_100sh.jpg",
  },
];
</script>
<style scoped>
.el-carousel {
  width: 100%;
}

.el-carousel__item img {
  width: 100%;
  height: 100%;
  color: #475669;
  opacity: 0.95;
  margin: 0;
  text-align: center;
}
</style>
